<template>
    <div class="F_funct">
        <ul class="funct">
            <li  > 
                <i class="iconfont icon-musicyinle"  @click="today_music"></i>
                <p>今日推荐</p>
            </li>
            <li > 
                <i class="iconfont icon-microphone" @click="music_all"></i>
                <p>热歌榜</p>
            </li>
            <li > 
                <i class="iconfont icon-gedan" @click="music_all"></i>
                <p>摇滚榜</p>
            </li>
            <li >
                <i class="iconfont icon-zhuzhuangtu" @click="music_all" ></i>
                <p>情歌对唱</p>
            </li>
            <li >
                <i class="iconfont icon-xingzhuang9" @click="music_all"></i>
                <p>网络歌榜</p>
            </li>
    </ul>
    </div>
    

</template>
<script>

export default {
  name: "funct",
  data() {
    return {
      
    };
  },
  methods: {  //方法
    music_all() {
      this.$router.push("/Music_list_all");
    },
    today_music(){
      this.$router.push("/today_Recom")
      this.$store.commit("changeIsplayMap",true)
    }
  },
  computed:{
      
  }
};
</script>
<style lang='scss' scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.F_funct {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 0 5%;
  box-sizing: border-box;
  .funct {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    overflow: hidden;
    padding: 0.5rem 0;
    box-sizing: border-box;
    li {
      float: left;
      width: 20%;
      text-align: center;
      i {
        font-size: 0.8rem;
        color: #22c5bd;
      }

      p {
        font-size: 10px;
        margin-top: 0.3rem;
      }
    }
  }
}
</style>
